<template>
	<view class="container">
		<view class="from">
			<text class="title">注册</text>
			<input class="input" placeholder="请输入用户名" v-model="username"/>
			<input class="input" placeholder="请输入密码" v-model="password" type="password"/>
			<input class="input" placeholder="请确认密码" v-model="confirmPassword" type="password"/>
			<button class="btn" type="primary" @click="handleLogin">注册</button>
			<view class="link">
				<text>已有账号？</text>
				<navigator url="/pages/Login/Login">去登入</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmPassword: ''
			}
		},
		methods: {
			handleLogin() {
				if(!this.username || !this.password || this.password !== this.confirmPassword){
					uni.showToast({
						title: this.password !== this.confirmPassword ? '两次密码不一致' : '请输入完整信息',
						icon: 'none'
					})
					return;
				}
				
				uni.showLoading({ title: '注册中...' });
				
				uniCloud.callFunction({
					name: 'addUser',
					data: {
						name: this.username,
						password: this.password
					},
					success: (msg) => {
						console.log("addUser CallBack " + JSON.stringify(msg));
						// UI更新
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '注册成功',
								icon: 'success'
							});
						}, 1000);
						uni.navigateBack();
					},
					fail: (res) => {
						console.warn("addUser CallBack fail", res);
						uni.hideLoading();
						uni.showToast({
							title: '注册失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
.container {
	flex: 1;
	padding: 40rpx;
	background-color: #f8f8f8;
}
.from {
	background: #fff;
	padding: 40rpx;
	border-radius: 16rpx;
}
.title {
	font-size: 36rpx;
	font-weight: 600;
	text-align: center;
	display: block;
	margin-bottom: 40rpx;
}
.input {
	height: 88rpx;
	border: 1px solid #eee;
	border-radius: 8rpx;
	padding: 0 20rpx;
	margin-bottom: 24rpx;
	font-size: 28rpx;
}
.btn {
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	border-radius: 8rpx;
	margin-top: 16rpx;
}
.link {
	text-align: center;
	margin-top: 32rpx;
	font-size: 28rpx;
	color: #666;
}
.link navigator {
	color: #007aff;
	margin-left: 8rpx;
}
</style>